<template>
  <div>
    <div class="box" ref="compare" id="compare"></div>
  </div>
</template>

<script>
let elementResizeDetectorMaker = require("element-resize-detector");
export default {
  data() {
    return {
      mychart: null,
    };
  },
  mounted() {
    this.initChart();

    let erd = elementResizeDetectorMaker();
    let that = this;
    erd.listenTo(document.getElementById("compare"), function (element) {
      that.$nextTick(function () {
        console.log("===");
        //使echarts尺寸重置
        that.mychart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.mychart.resize();
    });
  },
  methods: {
    initChart() {
      this.mychart = this.$echarts.init(this.$refs.compare);
      var option = {
         color: ["#409eff", "#06C141"],
        legend: {

          data: ["已收款", "代收款"],
        },
        grid: {
          left: 150,
          top: "15%",
        },
        xAxis: {
          axisLine: {
            lineStyle: { color: "#ccc" },
          },
          axisLabel: {
            textStyle: { color: "#777" },
          },
        },
        yAxis: [
          {
            inverse: true,
            splitLine: {
              show: true,
            },
            axisTick: {
              length: 100,
              lineStyle: { color: "#ccc" },
            },
            axisLine: {
              lineStyle: { color: "#ccc" },
            },
            data: ["-", "-", "-", "-","-"],
          },
          {
            // name: "                    实验阶段",
            nameLocation: "start",
            nameTextStyle: {
              fontWeight: "bold",
              color: "#000",
              fontSize: 15,
            },
            position: "left",
            offset: 120,
            axisLine: {
              onZero: false,
              show: false,
            },
            axisTick: {
              length: 200,
              inside: true,
              lineStyle: { color: "#ccc" },
            },
            axisLabel: {
              fontWeight: "bold",
              fontSize: 15,
              inside: true,
            },
            inverse: true,
            data: ["客户1", "客户2", "客户3", "客户4","客户5"],
          },
        ],
        series: [
          {
            name: "已收款",
            type: "bar",
            barWidth: 30,
            data: [
              211,
              235,
              240,
              314,
              248
            ],
            label: {
              normal: {
                show: true,
                position: "left",
                textStyle: {
                  color: "#000",
                  fontWeight: "normal",
                  fontSize: 15,
                },
                formatter: "已收款",
              },
            },
          },
          {
            name: "代收款",
            type: "bar",
            barWidth: 30,
            data: [
              211,
              235,
              240,
              314,
              178
            ], 
            label: {
              normal: {
                show: true,
                position: "left",
                textStyle: {
                  color: "#000",
                  fontWeight: "normal",
                  fontSize: 15,
                },
                formatter: "代收款",
              },
            },
          },
          // {
          //   name: "Precision",
          //   type: "bar",
          //   data: [
          //     211,
          //     235,
          //     240,
          //     314,
          //   ], //百分数
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "left",
          //       textStyle: {
          //         color: "#000",
          //         fontWeight: "normal",
          //         fontSize: 15,
          //       },
          //       formatter: "Precision",
          //     },
          //   },
          // },
          // {
          //   name: "Recall",
          //   type: "bar",
          //   data: [
          //     211,
          //     235,
          //     240,
          //     314,
          //   ], //百分数
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "left",
          //       textStyle: {
          //         color: "#000",
          //         fontWeight: "normal",
          //         fontSize: 15,
          //       },
          //       formatter: "Recall",
          //     },
          //   },
          // },
          // {
          //   name: "F-Value",
          //   type: "bar",
          //   data: [
          //     211,
          //     235,
          //     240,
          //     314,
          //   ], //百分数
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "left",
          //       textStyle: {
          //         color: "#000",
          //         fontWeight: "normal",
          //         fontSize: 15,
          //       },
          //       formatter: "F-Value",
          //     },
          //   },
          // },
        ],
      };
     
      this.mychart.setOption(option);

      window.addEventListener("resize", () => {
        this.mychart.resize();
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  /* height: 59rem; */
  height: 952px;
}
</style>